import { useState, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { useRequest } from 'umi';
import {
  Button,
  Descriptions,
  Result,
  Avatar,
  Space,
  Statistic,
  Modal,
  Form,
  Input,
  Select,
} from 'antd';
import ProTable from '@ant-design/pro-table';
import { PlusOutlined } from '@ant-design/icons';

import dataList from './component/data.json';

const { Option } = Select;

const DirectionManagement = () => {
  const [dataSource, setDataSource] = useState([]);
  const [isEditVisible, setIsEditVisible] = useState(false);
  const [isAddVisible, setIsAddVisible] = useState(false);
  const [userList, setUserList] = useState([]);
  const [editForm] = Form.useForm();
  const [addForm] = Form.useForm();

  const columns = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      key: 'index',
      width: 48,
    },
    {
      title: '编号',
      dataIndex: 'id',
      key: 'id',
      hideInSearch: true,
    },
    {
      title: '方向名称',
      dataIndex: 'directionName',
      key: 'directionName',
      copyable: true,
      ellipsis: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
    },
    {
      title: '方向负责人',
      dataIndex: 'directionLeader',
      key: 'directionLeader',
      hideInSearch: true,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text: any, record: any, _: any, action: any) => [
        <a key="edit" onClick={() => showEditModal(record)}>
          编辑
        </a>,
      ],
    },
  ];

  const getAllDirection = useRequest(
    (data) => {
      return {
        url: 'http://10.1.40.84:9993/direction/getAllDirection',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  const getDirectionByName = useRequest(
    (data) => {
      return {
        url: 'http://10.1.40.84:9993/direction/getDirectionByName',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  const getAllUser = useRequest(
    (data) => {
      return {
        url: 'http://10.1.40.84:9993/user/getAll',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  const addDirection = useRequest(
    (data) => {
      return {
        url: 'http://10.1.40.84:9993/direction/addDirection',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  const updateDirectionName = useRequest(
    (data) => {
      return {
        url: 'http://10.1.40.84:9993/direction/updateDirectionName',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  const showAddModal = () => {
    getAllUser.run({}).then((data) => {
      setUserList(data);
    });
    setIsAddVisible(true);
  };
  const handleAddOk = () => {
    setIsAddVisible(false);
    addForm.validateFields().then((value) => {
      console.log(value);
      addDirection.run(value).then(() => {
        getAllDirection.run({}).then((data) => {
          setDataSource(data);
        });
      });
    });
  };
  const handleAddCancel = () => {
    setIsAddVisible(false);
  };

  const showEditModal = (record: any) => {
    editForm.resetFields();
    editForm.setFieldsValue(record);
    getAllUser.run({}).then((data) => {
      setUserList(data);
    });
    setIsEditVisible(true);
  };
  const handleEditOk = () => {
    setIsEditVisible(false);
    editForm.validateFields().then((value: any) => {
      console.log(value);
      updateDirectionName.run(value).then(() => {
        getAllDirection.run({}).then((data) => {
          setDataSource(data);
        });
      });
    });
  };
  const handleEditCancel = () => {
    setIsEditVisible(false);
  };

  useEffect(() => {
    getAllDirection.run({}).then((data) => {
      setDataSource(data);
    });
  }, []);

  //修改后
  const columnsChanged: any = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      key: 'index',
      width: 48,
    },
    {
      title: '研究方向',
      dataIndex: 'directionName',
      align: 'center',
      key: 'directionName',
      ellipsis: true,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
    },
    {
      title: '研究内容',
      dataIndex: 'directionContent',
      key: 'directionContent',
      align: 'center',
      copyable: true,
      hideInSearch: true,
    },
    {
      title: '社会服务特色',
      dataIndex: 'socialService',
      key: 'socialService',
      align: 'center',
      copyable: true,
      hideInSearch: true,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (text: any, record: any, _: any, action: any) => [
        <a key="edit" onClick={() => console.log(record)}>
          编辑
        </a>,
        <a key="delete" onClick={() => console.log(record)}>
          删除
        </a>,
      ],
    },
  ];

  return (
    <PageContainer>
      {/* <ProTable
        dataSource={dataSource}
        headerTitle={'方向列表'}
        rowKey="id"
        columns={columns}
        onReset={() => {
          getAllDirection.run({}).then((data) => {
            setDataSource(data);
          });
        }}
        onSubmit={(params) => {
          getDirectionByName.run(params).then((data) => {
            setDataSource(data);
          });
        }}
        toolBarRender={() => [
          <Button icon={<PlusOutlined />} type="primary" onClick={showAddModal}>
            {'添加方向'}
          </Button>,
        ]}
      />
      <Modal
        title={'添加方向'}
        visible={isAddVisible}
        onOk={handleAddOk}
        onCancel={handleAddCancel}
        cancelText={'取消'}
        okText={'确定'}
      >
        <Form
          form={addForm}
          layout={'horizontal'}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 15 }}
        >
          <Form.Item
            label="方向名称"
            name={'directionName'}
            rules={[{ required: true, message: '请输入方向名称' }]}
          >
            <Input placeholder="请输入方向名称" allowClear />
          </Form.Item>
          <Form.Item
            label="方向负责人"
            name={'directionLeader'}
            rules={[{ required: true, message: '请输入方向负责人' }]}
          >
            <Select
              showSearch
              defaultActiveFirstOption={false}
              showArrow={true}
              filterOption={false}
              notFoundContent={null}
            >
              {userList?.map((element: any, index: any) => {
                return (
                  <Option key={index} value={element.account}>
                    {element.account}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
        </Form>
      </Modal>
      <Modal
        title={'编辑方向'}
        visible={isEditVisible}
        onOk={handleEditOk}
        onCancel={handleEditCancel}
        cancelText={'取消'}
        okText={'确定'}
      >
        <Form
          form={editForm}
          layout={'horizontal'}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 15 }}
        >
          <Form.Item label="方向编号" name={'id'} hidden>
            <Input placeholder="请输入方向名称" disabled />
          </Form.Item>
          <Form.Item
            label="方向名称"
            name={'directionName'}
            rules={[{ required: true, message: '请输入方向名称' }]}
          >
            <Input placeholder="请输入方向名称" allowClear />
          </Form.Item>
          <Form.Item
            label="方向负责人"
            name={'directionLeader'}
            rules={[{ required: true, message: '请输入方向负责人' }]}
          >
            <Select
              showSearch
              defaultActiveFirstOption={false}
              showArrow={true}
              filterOption={false}
              notFoundContent={null}
            >
              {userList?.map((element: any, index: any) => {
                return (
                  <Option key={index} value={element.account}>
                    {element.account}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
        </Form>
      </Modal> */}

      <ProTable
        style={{ marginTop: 16 }}
        headerTitle={'方向列表'}
        dataSource={dataList}
        columns={columnsChanged}
        rowKey="directionName"
        toolBarRender={() => [
          <Button icon={<PlusOutlined />} onClick={() => {}}>
            添加方向
          </Button>,
        ]}
      />
    </PageContainer>
  );
};
export default DirectionManagement;
